<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX后台管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css">
    <style>
        .layui-upload {
            text-align: center;
            width: 180px;
            height: 180px;
            margin-right: 20px;
        }

        .layui-upload-list {
            height: 96px;
            width: 100%;
        }

        .layui-upload-img {
            width: 100%;
            height: 100%;
            border: solid #666666 1px;
        }
    </style>
</head>
<body>
<br/>
<br/>
<fieldset class="layui-elem-field" style="width: 100%;">
    <legend>首页 - 活动</legend>
    <div class="layui-field-box" style="width: 100%">
        <!--表单-->
        <form class="layui-form" action="upload_index_huodong_img_insert" style="width: 500px">
            <div class="layui-form-item">
                <label class="layui-form-label">活动标题</label>
                <div class="layui-input-block">
                    <#if (img.index_huodong_title)??>
                    <input type="text" name="title" required value="${img.index_huodong_title}" lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                    <#else>
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入活动标题"
                           autocomplete="off" class="layui-input">
                </#if>
            </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动图片</label>
        <div class="layui-input-block">
            <#if (img.index_huodong_img)??>
            <img class="layui-upload-img" id="huodongImg" src="/img/IndexHuoDongPhoto/${img.index_huodong_img}"
                 alt="暂无图片" name="-1">
            <#else>
            <img class="layui-upload-img" id="huodongImg"
                 src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541140414097&di=3b72d3313c2c686f17e097013bcff639&imgtype=0&src=http%3A%2F%2Fwww.117200.com%2FRoam%2Fimages%2Fshop%2Fnophoto.gif"
                 alt="暂无图片" name="-1">
        </#if>
    </div>
    <br/>
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
    </div>

    </form>
    </div>
    </div>
</fieldset>
<#if msg??>
${msg}
</#if>
<script>
    layui.use('upload', function () {
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#huodongImg'
            , url: 'upload_index_huodong_img_path'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                var imgId = this.id;
                obj.preview(function (index, file, result) {
                    $("#huodongImg").attr('src', result);
                });
            }
            , done: function (res) {
                //如果上传失败
                console.log(res);
                if (res.code > 0) {
                    layer.alert("上传失败")
                    return layer.msg('上传失败');
                }
                //上传成功
                layer.alert("上传成功");
            }
            , error: function (error) {
                layer.alert("上传失败");
            }
        });
    });
</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: "post",
                url: "upload_index_huodong_img_insert",
                data: {"title": data.field.title},
                success: function (res) {
                    console.log(res);
                    if (res.code == 0) {
                        layer.msg("修改成功！", {icon: 1});
                        // obj.del();
                        return false;
                    } else {
                        layer.msg("修改失败！", {icon: 5})
                        return false;
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>